import { Button, Modal, Input, message } from 'antd';
import React, { useState } from 'react';
import ajax from './utils/ajax'

const App: React.FC = () => {
  const [passwordVisible, setPasswordVisible] = React.useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [password, setPassword] = useState<string>('')
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    if (!password) {
      return message.warning('密码不能为空')
    }
    const params = new URLSearchParams()
    params.append('password', password)
    ajax({
      method: "post",
      url: '/login',
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
      },
      data:params,
    }).then(res => {
      if (res.data.message === '登入成功') {
        message.success(res.data.message)
        setIsModalOpen(false);
      } else {
        message.warning('登录错误')
      }
    });
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Button type="default" onClick={showModal}>
        登录
      </Button>
      <Modal title="登录" width={340} okText="登录" cancelText="取消" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Input.Password
          placeholder="请输入密码"
          visibilityToggle={{ visible: passwordVisible, onVisibleChange: setPasswordVisible }}
          value={password}
          allowClear
          onChange={(e) => setPassword(e.target.value)}
        />
      </Modal>
    </>
  );
};

export default App;